<template>
	<div>
		<div class="head">
			<LoginHeader>
				<div slot="title">我的成就</div>
				<div slot="more">
					<router-link tag="span"  to="/help">
						<span class="el-icon-question"></span>
					</router-link>
				</div>
			</LoginHeader>
		    
		</div>
		<div class="body">
			<div class="body_one">
			  <img src="../Medal/img/modal1.png"/>
			</div>
			<div class="body_two">
				<div class="two_ico">
					<img src="../Medal/img/coutday.png" />
				</div>
				<span>累计刷牙天数</span>
				<span>0天</span>
			</div>
			<div class="body_two">
				<div class="two_ico">
					<img src="../Medal/img/coutcoin.png" />
				</div>
				<span>累计获得金币</span>
				<span>0</span>
			</div>
			<div class="big">
				<el-carousel :interval="4000" type="card"  ref="carousel" @click.native="linkTo">
				    <el-carousel-item v-for="item in imgs" style="height:3.6rem;">
				      <h3 class="medium"><img :src="item.url"/></h3>
					  
				    </el-carousel-item>
				  </el-carousel>
			</div>
		</div>
	
	</div>
</template>
<script>
	import LoginHeader from '../../components/njrcomponents/login_header.vue'
	export default {
		name:'Medal',
		components:{
			LoginHeader
		},
		data(){
			return{
				 imgs: [
				        {url: require('../Medal/img/1.png'), link: '/medal/imgone'},
				        {url: require('../Medal/img/2.png'), link: '/medal/imgtwo'},
				        {url: require('../Medal/img/3.png'), link: '/medal/imgthree'},
				        {url: require('../Medal/img/4.png'), link: '/medal/imgfour'},
				        {url: require('../Medal/img/5.png'), link: '/medal/imgfour'}
				      ]
			}
	    },
		methods: {
		    linkTo () {
		      let activeIndex = this.$refs.carousel.activeIndex
		      this.$router.push(this.imgs[activeIndex].link)
		    }
		  },
		 // mounted(){
		 //     this.$axios.post('/help').then ((res) => {
		 //       console.log(res)
		 //     })
		 //   }

		 }
</script>
<style lang="less" scoped>
   @import '../Medal/css/medalxiangmu.css';
   .head{
	   font-size: 40px;
   }
   .body{
	   text-align: left;
   }
   .body_one{
	   width: 100%;
   }
   .body_one img{
	   width: 95%;
	   padding: 16px 24px;
   } 
   .body_two{
	   height: 80px;
	   margin-left:16px ;
	   width: 95%;
	   line-height:80px;
	   border-bottom: 8px solid whitesmoke;
   }
   .two_ico{
	   display: inline-block;
	   height: 100%;
	   float: left;
   }
   .body_two span:nth-child(1){
	  
	   border-radius: 50%;
	   font-size: 48px;
	   background-color: bisque;
	  
   }
   .body_two span:nth-child(2){
	   height: 45px;
	   margin-left: 32px;
	   line-height: 40px;
	   font-size:32px;
	   display: inline-block;
   	   
   }
   .body_two span:nth-child(3){
   	   line-height:40px;
   	   font-size: 32px;
	   float: right;
	   line-height: 80px;
	   color: lightblue;
   }
   
    .el-carousel__item h3 {
       color: #475669;
       font-size: 14px;
       line-height: 200px;
       margin: 0;
	   margin-block-end: 0;
	   margin-block-start: 0
     }
     
     .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
     }
     
     .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
     }
	 .big{
		 margin-top:32px;
	 }
</style>